window.addEventListener('load', function () {
    //整个进度条
    var progressBar = this.document.querySelector('#progress_bar');
    //拖动的按钮
    var progressFlg = document.querySelector('#progress_bar_flg');
    //进度条背景
    var progressbValue = document.querySelector('#progress_bar_value');
    //进度值
    var progressValue = document.querySelector('#progress_value');
    //给拖动按钮绑定点击事件
    progressFlg.addEventListener('mousedown', function (e) {
        // 屏幕点击距离body的距离减去盒子距离body的距离  
        var Flgx = e.pageX - progressFlg.offsetLeft;
        document.addEventListener('mousemove', move);
        function move(e) {
            //点击按钮距离body的距离减去点击距离盒子的距离等于点击的位置                  
            var x = e.pageX - Flgx;
            // 进度条的宽度减去按钮按钮移动距离宽度
            var pm = progressBar.offsetWidth - progressFlg.offsetWidth;
            //判断如果
            if (x > pm) {
                x = pm;
            } else if (x <= 0) {
                x = 0;
            }
            progressFlg.style.left = x + 'px';
            progressbValue.style.width = x + 'px';
            progressValue.innerText=Math.round(x/(pm)*100)+'%';
            console.log();
        }
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move)
        })
    })









})